<template>
    <section class="travel-list">
      <div class="container">
        <h2 class="section-title">旅游景点推荐</h2>
        
        <div class="filter-controls">
          <div class="search-box">
            <input 
              type="text" 
              v-model="searchQuery" 
              placeholder="搜索城市或景点..."
              @input="filterTravels"
            >
            <i class="fas fa-search"></i>
          </div>
          
          <div class="sort-options">
            <select v-model="sortBy" @change="sortTravels">
              <option value="date-desc">最新发布</option>
              <option value="date-asc">最早发布</option>
              <option value="name-asc">名称 (A-Z)</option>
              <option value="name-desc">名称 (Z-A)</option>
            </select>
          </div>
        </div>
        
        <div class="travel-grid">
          <div 
            v-for="travel in filteredTravels" 
            :key="travel.id" 
            class="travel-card"
          >
            <div class="travel-image">
              <img :src="travel.image" :alt="travel.title">
              <div class="travel-badge">{{ travel.city }}</div>
            </div>
            <div class="travel-content">
              <h3 class="travel-title">{{ travel.title }}</h3>
              <div class="travel-meta">
                <span class="travel-location">
                  <i class="fas fa-map-marker-alt"></i> {{ travel.address }}
                </span>
                <span class="travel-date">
                  <i class="far fa-calendar-alt"></i> {{ formatDate(travel.createdAt) }}
                </span>
              </div>
              <p class="travel-description">{{ travel.description }}</p>
              <div class="travel-actions">
                <button class="view-btn" @click="viewDetails(travel.id)">
                  <i class="fas fa-eye"></i> 查看详情
                </button>
                <button class="map-btn" @click="openMap(travel.mapUrl)">
                  <i class="fas fa-map-marked-alt"></i> 查看地图
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </template>
  
  <script>
  import { travelBlogApi } from '@/api/api'
  
  export default {
    name: 'TravelList',
    data() {
      return {
        searchQuery: '',
        sortBy: 'date-desc',
        // 保留3个作为占位数据
        placeholderTravels: [
          {
            id: 1,
            city: '北京',
            title: '故宫博物院',
            address: '北京市东城区景山前街4号',
            description: '世界上现存规模最大、保存最为完整的木质结构古建筑之一，是中国明清两代的皇家宫殿。',
            image: 'https://example.com/images/forbidden-city.jpg',
            mapUrl: 'https://maps.google.com/?q=故宫博物院',
            createdAt: '2023-05-15'
          },
          {
            id: 2,
            city: '上海',
            title: '外滩',
            address: '上海市黄浦区中山东一路',
            description: '上海最具标志性的景点之一，52幢风格各异的历史建筑构成了"万国建筑博览群"。',
            image: 'https://example.com/images/bund.jpg',
            mapUrl: 'https://maps.google.com/?q=上海外滩',
            createdAt: '2023-06-20'
          },
          {
            id: 3,
            city: '杭州',
            title: '西湖',
            address: '浙江省杭州市西湖区',
            description: '中国十大风景名胜之一，2011年被列入世界文化遗产名录，以"西湖十景"闻名。',
            image: 'https://example.com/images/west-lake.jpg',
            mapUrl: 'https://maps.google.com/?q=西湖',
            createdAt: '2023-04-10'
          }
        ],
        apiTravels: [],  // 从API获取的数据
        isLoading: false,
        error: null
      }
    },
    computed: {
      // 合并占位数据和API数据
      travels() {
        return [...this.placeholderTravels, ...this.apiTravels]
      },
      // 过滤后的数据
      filteredTravels() {
        if (!this.searchQuery) {
          return [...this.travels]
        }
        const query = this.searchQuery.toLowerCase()
        return this.travels.filter(travel => 
          travel.city.toLowerCase().includes(query) || 
          travel.title.toLowerCase().includes(query) ||
          travel.address.toLowerCase().includes(query)
      )
      },
      // 排序后的数据
      sortedTravels() {
        const travels = [...this.filteredTravels]
        switch (this.sortBy) {
          case 'date-desc':
            return travels.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
          case 'date-asc':
            return travels.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt))
          case 'name-asc':
            return travels.sort((a, b) => a.title.localeCompare(b.title))
          case 'name-desc':
            return travels.sort((a, b) => b.title.localeCompare(a.title))
          default:
            return travels
        }
      }
    },
    created() {
      this.fetchTravelBlogs()
    },
    methods: {
      // 从API获取旅游博客数据
      async fetchTravelBlogs() {
        this.isLoading = true
        this.error = null
        try {
          const response = await travelBlogApi.getTravelBlogList()
          console.log('获取到的旅游博客数据：', response)
          this.apiTravels = response || []
        } catch (err) {
          console.error('获取旅游博客失败:', err)
          this.error = '获取数据失败，请稍后重试'
          // 保持占位数据展示
        } finally {
          this.isLoading = false
        }
      },
      // 刷新数据
      refreshData() {
        this.fetchTravelBlogs()
      },
      formatDate(dateStr) {
        const date = new Date(dateStr)
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
      },
      viewDetails(id) {
        this.$router.push({ name: 'TravelDetail', params: { id } })
      },
      openMap(url) {
        window.open(url, '_blank')
      }
    }
  }
  </script>
  
  <style scoped>
  .travel-list {
    padding: 4rem 0;
    background-color: #f8f9fa;
  }
  
  .section-title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    color: #2c3e50;
  }
  
  .filter-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .search-box {
    position: relative;
    flex-grow: 1;
    max-width: 400px;
  }
  
  .search-box input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 1rem;
    transition: all 0.3s;
  }
  
  .search-box input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  }
  
  .search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #7f8c8d;
  }
  
  .sort-options select {
    padding: 0.75rem 1rem;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 1rem;
    background-color: white;
    cursor: pointer;
  }
  
  .travel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
  }
  
  .travel-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .travel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  }
  
  .travel-image {
    position: relative;
    height: 200px;
    overflow: hidden;
  }
  
  .travel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }
  
  .travel-card:hover .travel-image img {
    transform: scale(1.05);
  }
  
  .travel-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: rgba(52, 152, 219, 0.9);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
  }
  
  .travel-content {
    padding: 1.5rem;
  }
  
  .travel-title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: #2c3e50;
  }
  
  .travel-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #7f8c8d;
  }
  
  .travel-meta i {
    margin-right: 0.3rem;
  }
  
  .travel-description {
    margin: 0 0 1.5rem;
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .travel-actions {
    display: flex;
    gap: 0.75rem;
  }
  
  .travel-actions button {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 5px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  
  .view-btn {
    background-color: #3498db;
    color: white;
  }
  
  .view-btn:hover {
    background-color: #2980b9;
  }
  
  .map-btn {
    background-color: #f8f9fa;
    color: #3498db;
    border: 1px solid #3498db !important;
  }
  
  .map-btn:hover {
    background-color: #e3f2fd;
  }
  
  @media (max-width: 768px) {
    .filter-controls {
      flex-direction: column;
    }
    
    .search-box {
      max-width: 100%;
    }
    
    .travel-grid {
      grid-template-columns: 1fr;
    }
  }
  </style>